সিএসএস৩ মিডিয়া কুয়েরি এমন একটি পদ্ধতি যা দিয়ে নির্দিষ্ট ডিভাইস বা স্ক্রিনের বৈশিষ্ট্যের উপর ভিত্তি করে আলাদা আলাদা সিএসএস স্টাইল প্রয়োগ করা যায়। এটি রেসপন্সিভ ডিজাইন তৈরির প্রধান উপাদান।
মিডিয়া কুয়েরি একটি নির্দিষ্ট শর্ত বা বৈশিষ্ট্য পরীক্ষা করে এবং সেই শর্ত পূরণ হলে নির্ধারিত সিএসএস স্টাইল প্রয়োগ করে।
@media media-type and (condition) {
/* CSS rules here */
}
screen, print, all।min-width, max-width, orientation।নিচে দেখানো হয়েছে কিভাবে মিডিয়া কুয়েরি ব্যবহার করে স্ক্রিন সাইজের উপর ভিত্তি করে টেক্সটের রঙ পরিবর্তন করা যায়।
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Media Query Example</title>
<style>
h1 {
text-align: center;
color: black;
}
/* স্ক্রিনের সর্বোচ্চ প্রস্থ 600px */
@media screen and (max-width: 600px) {
h1 {
color: red;
}
}
/* স্ক্রিনের প্রস্থ 601px থেকে 992px */
@media screen and (min-width: 601px) and (max-width: 992px) {
h1 {
color: green;
}
}
/* স্ক্রিনের প্রস্থ 992px এর বেশি */
@media screen and (min-width: 993px) {
h1 {
color: blue;
}
}
</style>
</head>
<body>
<h1>CSS3 Media Query Example</h1>
</body>
</html>
h1-এর টেক্সটের রঙ কালো (black) রাখা হয়েছে।নিচে একটি উদাহরণ দেওয়া হয়েছে যেখানে মিডিয়া কুয়েরি ব্যবহার করে একটি রেসপন্সিভ লেআউট তৈরি করা হয়েছে।
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Layout</title>
<style>
body {
margin: 0;
font-family: Arial, sans-serif;
}
.container {
display: flex;
flex-wrap: wrap;
padding: 10px;
}
.box {
flex: 1 1 100%;
padding: 20px;
text-align: center;
color: white;
margin: 5px;
}
.box:nth-child(1) { background-color: red; }
.box:nth-child(2) { background-color: green; }
.box:nth-child(3) { background-color: blue; }
/* ট্যাবলেট (স্ক্রিন প্রস্থ ৬০০ পিক্সেল বা তার বেশি) */
@media screen and (min-width: 600px) {
.box {
flex: 1 1 calc(50% - 10px);
}
}
/* ডেস্কটপ (স্ক্রিন প্রস্থ ৯৯২ পিক্সেল বা তার বেশি) */
@media screen and (min-width: 992px) {
.box {
flex: 1 1 calc(33.33% - 10px);
}
}
</style>
</head>
<body>
<div class="container">
<div class="box">Box 1</div>
<div class="box">Box 2</div>
<div class="box">Box 3</div>
</div>
</body>
</html>
.box ক্লাসের সব বক্স ১০০% প্রস্থ নিয়ে আলাদাভাবে প্রদর্শিত হবে।<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Navigation</title>
<style>
body {
margin: 0;
font-family: Arial, sans-serif;
}
nav {
display: flex;
justify-content: space-between;
align-items: center;
background-color: #333;
color: white;
padding: 10px 20px;
}
.menu {
display: none;
}
nav a {
text-decoration: none;
color: white;
margin: 0 10px;
}
/* বড় স্ক্রিনে নেভিগেশন মেনু দেখাও */
@media screen and (min-width: 768px) {
.menu {
display: flex;
}
}
</style>
</head>
<body>
<nav>
<div class="logo">MyLogo</div>
<div class="menu">
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Services</a>
<a href="#">Contact</a>
</div>
</nav>
</body>
</html>
.menu ক্লাসটি মোবাইল স্ক্রিনে লুকানো (display: none) থাকে।.menu ক্লাসটি প্রদর্শিত (display: flex) হয়।| ডিভাইস | ব্রেকপয়েন্ট (Breakpoints) |
|---|---|
| স্মার্টফোন | max-width: 600px |
| ট্যাবলেট | min-width: 600px এবং max-width: 992px |
| ডেস্কটপ | min-width: 992px এবং max-width: 1200px |
| বড় স্ক্রিন | min-width: 1200px |
এই টিউটোরিয়ালের মাধ্যমে, আপনি সহজেই সিএসএস মিডিয়া কুয়েরি ব্যবহার করে রেসপন্সিভ ডিজাইন তৈরি করতে পারবেন।
common.read_more
common.or
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
